

<div class="html">
    <?php echo Ticket::loadHtml(); ?>
</div>

<?php
    $form = $this->beginWidget('CActiveForm', array(
        'id' => 'category-form',
        'enableAjaxValidation' => false,
        'enableClientValidation' => true,
        'htmlOptions' => array(
            'class' => 'form-horizontal',
             'enctype' => 'multipart/form-data'
        ),
    ));
?>

<div class="row-fluid">

    <div class='add'>
    <div class="span12">
        <!--PAGE CONTENT BEGINS-->

        <div class="control-group" style="margin-top: 40px;">
            <?php echo $form->labelex($model, 'ranking', array('class' => 'control-label')); ?>
            <div class="controls">
                <?php echo $form->textField($model, 'type_of_ticket[]', array('size' => 60, 'maxlength' => 255, 'value'=>'0',  'class' => 'span5 quantity', 'placeholder' => '0->xx')); ?>
                <span class="help-inline"><?php echo $form->error($model, 'ranking[]'); ?></span>
            </div>
        </div>
        
        <div class="control-group">
            <?php echo $form->labelex($model, 'description_of_ticket', array('class' => 'control-label')); ?>
            <div class="controls">
                <?php echo $form->textField($model, 'description_of_ticket[]', array('size' => 60, 'maxlength' => 255, 'class' => 'span5', 'placeholder' => 'VIP Seat, Luxury Seat, Normal Seat. ')); ?>
                <span class="help-inline"><?php echo $form->error($model, 'description_of_ticket[]'); ?></span>
            </div>
        </div>
        
        <div class="control-group">
            <?php echo $form->labelex($model, 'price', array('class' => 'control-label')); ?>
            <div class="controls">
                <?php echo $form->textField($model, 'price[]', array('size' => 60, 'maxlength' => 255, 'class' => 'price', 'placeholder' => 'Price','required' => 'required')); ?> / VNĐ
                <span class="help-inline"><?php echo $form->error($model, 'price[]'); ?></span>
            </div>
        </div>

        <div class="control-group">
            <?php echo $form->labelex($model, 'quantity', array('class' => 'control-label')); ?>
            <div class="controls">
                <?php echo $form->textField($model, 'quantity[]', array('size' => 60, 'maxlength' => 255, 'class' => 'span5 quantity', 'placeholder' => 'Total','required' => 'required')); ?>
                <span class="help-inline"><?php echo $form->error($model, 'quantity[]'); ?></span>
            </div>
        </div>

        <div class="control-group">
            <?php echo $form->labelex($model, 'ticket_code_org', array('class' => 'control-label')); ?>
            <div class="controls">
                <?php echo $form->textField($model, 'ticket_code_org[]', array('size' => 60, 'maxlength' => 255, 'class' => 'span5', 'placeholder' => 'X143234#1232')); ?>
                <span class="help-inline"><?php echo $form->error($model, 'ticket_code_org[]'); ?></span>
            </div>
        </div>

        <div class="control-group">
            <?php echo $form->labelex($model, 'seat_map', array('class' => 'control-label')); ?>
            <div class="controls">
                <?php echo $form->dropDownlist($model, 'seat_map[]', array(0=>'No', 1=>'Yes'),array('class' => 'span5 seat1','id'=>'seat1', 'placeholder' => 'Seat Map')); ?>
                <span class="help-inline"><?php echo $form->error($model, 'seat_map'); ?></span>
            </div>
        </div>    

        <div class="control-group file1 hide1">
            <?php echo $form->labelex($model, 'fileImage', array('class' => 'control-label')); ?>
            <div class="controls">
                <?php echo $form->fileField($model, 'fileImage[]', array('class' => 'id-input-file-1 span5')); ?>
                <span class="help-inline" style="float:left;margin-left:390px;"><?php echo $form->error($model, 'fileImage'); ?></span>
            </div>
        </div>
    <!--</div>-->
    </div>
    </div>
   


    <div class="form-actions">
        <a class="btn add_more" href="#">
            <i class="icon-plus"></i>
            Add More
        </a>
        
        <button class="btn btn-info" type="submit">
            <i class="icon-ok bigger-110"></i>
            Submit
        </button>
        <!--&nbsp; &nbsp; &nbsp;-->

    </div> 
</div>
<?php $this->endWidget(); ?>

<script>
    
    function fnUpdateNoTr(){
        var i = 1;
        $('.add .span12').each(function(){
            var cl  = 'seat'+i;
//            var hide  = 'hide'+i;
//            var file  = 'file'+i;
            $(this).find('select').eq(0).addClass(cl);
//            $(this).find('.control-group '+"."+hide).addClass(file);
//            $(this).find('.control-group '+"."+hide).addClass(hide);
            i++;
        });        
    }
    
    $(".add_more").on('click', function(e){
        var str = $('.html').html();
//        var input = $('.add').find('.span12').eq(0).clone();
//        var str = $('.html').html();
//        input.find("input:file").attr('id', 'abc');
        var inputFile = $('.add').find('.span12').eq(0).find("input:file").eq(0).clone(true);
        // console.log(inputFile);
        inputFile.val('');
        
//        str.append(inputFile);
        //str.find('.ace-file-input').append(inputFile);
//        $(str).find('.file1').append(inputFile);
//        $(str).find('.file1').parent().remove('input');
//        $(str).find('.file1').append(inputFile);
//        a.parent();
//        var a = '<div class="ace-file-input">';
//        $(a).append(inputFile);
//        $(a).append('</div>');
        
//        $(str).find('.file1').find('.controls').append('<div class="ace-file-input">');
//        $(str).find('.file1').find('.controls').append(inputFile);
//        $(str).find('.file1').find('.controls').append('</div>');
        $('.add').append(str);
//        $('.add').find('.file1').last().find('.controls').append('<div class="ace-file-input"></div>');
//        $('.add').find('.file1').last().find('.ace-file-input').append(inputFile);
//        $('.add').find('.file1').last().find('.ace-file-input').append('<label data-title="Choose"><span data-title="No File ..." ><i class="icon-upload-alt"></i></span></label><a href="#" class="remove"><i class="icon-remove"></i></a>');
        $('.add').find('.file1').last().find('.controls').append(inputFile);
//        $('.add').find('.file1').last().find('.controls').append('</div>');
//        $('.add').append(inputFile);
        fnUpdateNoTr();
   });
   
    // $('a.removeAddMore').on('click', function(){
    //     var a = $(this).parent().parent().parent().attr('class');

    //     $(this).parent().parent().parent().remove();

    //     fnUpdateNoTr();
    // });
    // $('a.removeAddMore').click(function(){
    //     console.log('ab');
    // });
    // $('.seat1').on('change', function(){
    //     var parent = $(this).parent().parent().parent();
    //     // console.log(parent);
    //     var a = $(this).val();
    //     if (a === '1') {
    //         $(parent).find('.file1').removeClass('hide1');
    //     }
    //     else{
    //         $(parent).find('.file1').addClass('hide1');
    //     }
    // });
    $('select#seat1').change(function(){
        var parent = $(this).parent().parent().parent();
        // console.log(parent);
        var a = $(this).val();
        if (a === '1') {
            $(parent).find('.file1').removeClass('hide1');
        }
        else{
            $(parent).find('.file1').addClass('hide1');
        }
    });
    
//    function validateNumber(){
            $(".price").on('click', function(){
                    $(this).unbind("keydown");
                    $(this).bind("keydown",function(event){
                        if( !(event.keyCode == 8                                // backspace
                            || event.keyCode == 46                              // delete
                            || event.keyCode == null                      // delete
                            || event.keyCode == 9                           // tab
                            || (event.keyCode == 190 || event.keyCode == 110 )                          // dấu chấm (point) 
                            || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
                            || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
                            || (event.keyCode >= 96 && event.keyCode <= 105))   // number on keypad
                            ) {
                                event.preventDefault();     // Prevent character input
                            }
                    });
            });
            
            $(".quantity").on('click', function(){
                    $(this).unbind("keydown");
                    $(this).bind("keydown",function(event){
                        if( !(event.keyCode == 8                                // backspace
                            || event.keyCode == 46                              // delete
                            || event.keyCode == null                      // delete
                            || event.keyCode == 9                           // tab
//                            || (event.keyCode == 190 || event.keyCode == 110 )                            // dấu chấm (point) 
                            || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
                            || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
                            || (event.keyCode >= 96 && event.keyCode <= 105))   // number on keypad
                            ) {
                                event.preventDefault();     // Prevent character input
                            }
                    });
            });
//    }
</script>

<style>
    .span12{
        margin-left: 0px !important;
    }
    
    .price{
        width: 363px;
    }
    
    .ace-file-input {
        width: 378px;
    } 
    
    .hide1, .hide2, .hide3{
        display: none;
    }
    
    .html{
        display: none;
    }
    
    .removeAddMore img{
        margin-left: 30px;
    }
</style>
